//    1.随机一个字母显示到页面上
var char;
var spans = document.querySelector('span');
function getRandomCharacter(){
   var str = 'ABCDEFJHIGKLMNOPQRSTUVWSYZ';
   var random = Math.ceil(Math.random()*25);
   char = str[random];
   console.log(char);
   spans.innerText = char;

}


 getRandomCharacter();
//  声明变量，记录正确，错误的输入次数
 var right = 0;
 var error = 0;
// toUpperCase:转换为大写
// toLowerCase:转换小写
// spans.innerHTML = char.toLowerCase();
// 2、监听按键输入，进行字符对比
window.onkeyup = function(event){
    console.log(event.key);
    var key = event.key;
    if(key.toLowerCase() == char.toLowerCase()){
        console.log('成功了');
        getRandomCharacter();
        right ++;
    }
else{
    console.log('失败了');
    spans.classList.add('animated');
    spans.classList.add('shake');
    spans.style.color = 'yellow';

    setTimeout(function(){
        spans.classList.remove('animated','shake');
        spans.style.color = 'black';
    },1000);
    error ++;

}
// 计算正确率
// toFixed():保留几位小数
var rightRate = right/(right+error)*100;
var span2 =document.querySelector('div>span:nth-child(3)');
span2.innerHTML = '正确次数是'+ right + ',错误次数是'+ error +'。正确率是'+
rightRate.toFixed(2) +'%!'
}
// 修改样式类的方法
// 1）ele.classlist.add('样式类名称'):在原有的样式类基础上添加新的样式
// 2）ele.className = '样式类的名称'：会把原有的样式类覆盖掉

// 定时器
// 每隔一定的事件。执行一次函数
setInterval(function(){
    console.log('----')
},1000);

